<template>
    <div class="postDetails">
      <div class="ath" v-if="!ath">
        <img src="/static/img/ath.jpg" alt="" mode="widthFix">
      </div>
      <div v-else>
        <div class="commentMd-title">
          <img :lazy-load="true" :src="postDetails.head_img ? picPre + postDetails.head_img : picPre + 'front/avatar.jpg'" alt="">
          <div>
            <p>{{postDetails.username}}</p>
            <p>{{postDetails.created_at}}</p>
          </div>
        </div>
        <h1 class="postDetails-title">
          <rich-text :nodes="postDetails.title"></rich-text>
        </h1>
        <div v-html="postDetails.describe" class="postContent">
          <rich-text :nodes="postDetails.describe"></rich-text>
        </div>
        <div v-if="postDetails.img" style="margin-top: 20rpx;">
          <van-row gutter="5" class="img-box">
            <van-col v-for="(item,index) in postDetails.img" :key="index" ﻿@tap="previewImg(index)" span="8">
              <img :lazy-load="true" :src="picPre + item"  alt="" mode="aspectFill">
            </van-col>
          </van-row>
        </div>
        <div class="commentMd-footer">
          <div>
            <i class="iconfont iconpinglun" style="font-size: 36rpx;"></i>
            <p>{{postDetails.comment_num}}</p>
          </div>
          <div :class="postDetails.is_like === 1?'like':'notLike'"  ﻿@tap="likeBtn(postDetails.id,postDetails.is_like)">
            <i class="iconfont iconzan" style="font-size: 36rpx;"></i>
            <p :class="postDetails.is_like === 1?'like':'notLike'">{{postDetails.like_num}}</p>
          </div>
          <div :class="postDetails.is_collect === 1?'collect':'notLike'" ﻿@tap="collectBtn(postDetails.id,postDetails.is_collect)">
            <i class="iconfont iconshoucang" style="font-size: 36rpx;"></i>
            <p :class="postDetails.is_collect === 1?'collect':'notLike'">{{postDetails.collect_num}}</p>
          </div>
        </div>
        <h1 class="reply-font">评论</h1>
        <div v-if="commentList.length === 0" style="text-align: center;color: #ADADAD;">暂无评论，你先来说说看～~</div>
        <discuss v-else :commentList="commentList"></discuss>
        <div class="postDetails-input">
          <textarea type="text" maxlength="140" :auto-height="true" :fixed="true" placeholder="看帖是喜欢，评论才是真爱" :value="value" @input="commentInput" placeholder-style="color:#B6B6B6;"></textarea>
          <button type="default" ﻿@tap="publishBtn" :style="{'height':btnHeight+'rpx','lineHeight':btnHeight+'rpx'}">发表</button>
        </div>
      </div>
      <bottoms></bottoms>
    </div>
</template>

<script>
  import discuss from '@/components/discuss/index'
  import bottoms from '@/components/reachBottom/index'
  import { mapState } from 'vuex'
  export default {
        name: "postDetails",
      components:{
        discuss,
        bottoms
      },
      data(){
          let that = this;
          return{
            id:"",
            picPre: that.$api.picPre,
            postDetails:{},
            commentList:[],
            loadingEnd:{
              moduleOne: false,
              moduleTwo: false,
            },
            value: "",
            btnHeight: "",
            totalPage: 1,
            currentPage: 1,
            totalCount: 0,
            isClick:true,
			clickLikeBtn: true,
			clickCollectBtn: true,
          }
      },
      methods:{
        likeBtn(id,state){
			if(this.clickLikeBtn){
			  this.clickLikeBtn = false;
			setTimeout(() => {
			  this.clickLikeBtn = true;
			}, 2000);//一秒内不能重复点击
			  if(state === 1){
			    this.clickLike(id,"like","no")
			  }
			  else {
			    this.clickLike(id,"like","yes")
			  }
			}
        },
        collectBtn(id,state){
			if(this.clickCollectBtn){
				this.clickCollectBtn = false;
				setTimeout(() => {
				  this.clickCollectBtn = true;
				}, 2000);//一秒内不能重复点击
			  if(state === 1){
			    this.clickLike(id,"collect","no")
			  }
			  else {
			    this.clickLike(id,"collect","yes")
			  }	
			}
        },
        clickLike(id,type,state){
          this.$ajax
            .post(this.$api.clickLike,{
              posts_id:id,
              type:type,
              is_click:state
            })
            .then(res => {
				// this.commentList = [];
              this.viewLoad();
            })
            .catch(err => {
              uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        getPostsDetail(){
          this.$ajax
            .post(this.$api.postsDetail,{posts_id:this.id})
            .then(res => {
              this.loadingEnd.moduleOne = true;
              this.postDetails = res;
              this.postDetails.describe = this.postDetails.describe.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
              this.getCommentList();
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true;
              this.loadingEnd.moduleTwo = true;
              uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        getCommentList(){
          this.$ajax
            .post(this.$api.commentList,{
              posts_id:this.id,
              page_size: 10,
              page: this.currentPage,
            })
            .then(res => {
              this.loadingEnd.moduleTwo = true;
              this.commentList.push(...res.data);
              this.totalPage = res.total_page;
              this.totalCount = res.total_count;
            })
            .catch(err => {
              this.loadingEnd.moduleTwo = true;
              uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        commentInput(e){
          if(e.target.cursor === 140){
            uni.showToast({
              title: "输入框字数达到上限！",
              icon: 'none',
              duration: 2000
            })
          }
          this.value = e.mp.detail.value;
        },
        publishBtn(){
          if(this.isClick){
            this.isClick = false;
            setTimeout(() => {
              this.isClick = true;
            }, 1000);//一秒内不能重复点击
            if(this.value.length>0){
              this.$ajax
                .post(this.$api.addComment,{posts_id:this.id,comment:this.value})
                .then(res => {
                  this.value = "";
                  uni.showToast({
                    title: "发表成功待审核！",
                    icon: 'success',
                    duration: 2000
                  });
                  // this.commentList = [];
                  // this.getPostsDetail();
                })
                .catch(err => {
                  uni.showToast({
                    title: err,
                    icon: 'none',
                    duration: 2000
                  })
                });
            }
            else {
              uni.showToast({
                title: "请输入评论内容！",
                icon: 'none',
                duration: 2000
              })
            }
          }

        },
        previewImg(ind) {
          let that = this;
          let arr = [];
          for (let i = 0; i < this.postDetails.img.length; i++) {
            arr.push(this.$api.picPre + this.postDetails.img[i])
          }
          //最主要就是调用这个
          uni.previewImage({
            current: that.$api.picPre + that.postDetails.img[ind],
            urls: arr
          });
        },
        viewLoad(){
          this.value = "";
          this.currentPage=1;
          this.postDetails ={};
          this.commentList=[];
          this.loadingEnd = {
            moduleOne: false,
            moduleTwo: false
          };
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          this.$store.dispatch('changeAth',true)
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getPostsDetail();
        },
      },
      onLoad(res){
        this.id = res.id;
        this.viewLoad();
        let that = this;
        uni.getSystemInfo({
          success: function(res) {
            if (res.platform === "devtools") {
              that.btnHeight = 66;
            }
            else if (res.platform === "ios") {
              that.btnHeight = 90;
            } else if (res.platform === "android") {
              that.btnHeight = 66;
            }
          }
        })
      },
    onPullDownRefresh(){
      this.viewLoad();
      uni.stopPullDownRefresh() //停止下拉刷新
    },
    onReachBottom(){
      if(this.totalPage > this.currentPage){
        this.$store.dispatch("changeIsMore", true);
        this.$store.dispatch("changeIsEnd", false);
        this.currentPage++;
        this.getCommentList();
      }
      else if(this.totalCount === 0){
        this.$store.dispatch("changeIsEnd", false);
      }
      else {
        this.$store.dispatch("changeIsEnd", true);
        this.$store.dispatch("changeIsMore", false);
      }
    },
    computed:{
      ...mapState([
        'ath'
      ]),
      hideLoading(){
        if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo){
          setTimeout(function(){
            uni.hideLoading()
          }, 800)
        }
      }
    },
      onHide(){
        this.value = "";
      }
    }
</script>

<style scoped>
  .ath{
    width: 100%;
  }
  .ath img{
    width: 100%;
  }
  .postDetails{
    padding: 40rpx 30rpx 200rpx;
    box-sizing: border-box; 
  }
  .commentMd-title{
    display: flex;
    align-items: center;
  }
  .commentMd-title>img{
    width: 64rpx;
    height: 64rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }
  .commentMd-title>div>p:first-child{
    font-size: 24rpx;
    color: #7A7A7A;
  }
  .commentMd-title>div>p:last-child{
    color: #ADADAD;
    font-size: 20rpx;
  }
  .postDetails-title{
    font-size: 30rpx;
    color: #323232;
    font-weight: bold;
    line-height: 35rpx;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 25rpx 0;
  }
  .commentMd-footer{
    display: flex;
    margin-top: 30rpx;
    border-bottom: 14rpx solid #F7F7F7;
    padding-bottom: 22rpx;
  }
  .commentMd-footer>div{
    display: flex;
    align-items: center;
  }
  .commentMd-footer>div:last-child{
    margin-left: 55rpx;
  }
  .commentMd-footer>div:first-child{
    margin-right: 55rpx;
  }
  .commentMd-footer>div>p{
    font-size: 24rpx;
    color: #323232;
    margin-left: 20rpx;
  }
  .like{
    color: #56A2EF !important;
  }
  .collect{
    color: #EF5A56 !important;
  }
  .notLike{
    color: #323232;
  }
  .reply-font{
    font-size: 34rpx;
    color: #323232;
    line-height: 30rpx;
    font-weight: bold;
    padding: 39rpx 0 30rpx;
  }
  .postDetails-input{
    padding: 20rpx 30rpx 50rpx 30rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background: #ffffff;
    border-top: 1rpx solid #EEEEEE;
    width: 100%;
    right: 0;
    box-sizing: border-box;

  }
  .postDetails-input> textarea{
    border-radius: 33rpx;
    background-color: #EFEFEF;
    width: 480rpx;
    font-size: 24rpx;
    padding: 18rpx 30rpx;
  }
  .postDetails-input>button{
    width: 120rpx;
    height: 90rpx;
    background-color: #EF5A56;
    border-radius: 6rpx;
    color: #ffffff;
    font-size: 32rpx;
    padding: 0;
    margin: 0;
    line-height: 90rpx;
  }
  .img-box img{
    width: 100%;
    height: 240rpx;
  }
</style>
